<!-- 虚拟列表 -->
<template>
	<div class="page">
		<div class="work-space">
			<a-tabs v-model:activeKey="activeKey" class="demo-tabs" @tabClick="handleClick">
				<a-tab-pane key="1" tab="定高虚拟列表">
					<div class="list-container">
						<list-container />
					</div>
				</a-tab-pane>
				<a-tab-pane key="2" tab="不定高虚拟列表">
					<div class="list-container">
						<estimated-list-container />
					</div>
				</a-tab-pane>
				<a-tab-pane key="3" tab="瀑布流列表">
					<div class="waterfall-container">
						<waterfall-container />
					</div>
				</a-tab-pane>
				<a-tab-pane key="4" tab="瀑布流虚拟列表">
					<div class="waterfall-container">
						<virtual-waterfall-container />
					</div>
				</a-tab-pane>
			</a-tabs>
		</div>
	</div>
</template>

<script setup lang="ts" name="virtualListComponent">
	import EstimatedListContainer from './components/estimated-list-container.vue'
	import ListContainer from './components/list-container.vue'
	import waterfallContainer from './components/waterfall-container.vue'
	import virtualWaterfallContainer from './components/virtual-waterfall-container.vue'

	const activeKey = ref('1')

	const handleClick = (tab: Number, event: Event) => {
		console.log(tab, event)
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		.work-space {
			width: 60vw;
			height: 90vh;
			.list-container {
				width: 100%;
				height: 80vh;
				max-width: 450px;
			}
			.waterfall-container {
				width: 100%;
				height: 80vh;
			}
		}
	}
</style>
